:host {
  width: 500px; display: inline-block; vertical-align: top; --height: 30px; --padding: 0px 10px; --currency-background: #f5f5f5; --currency-padding: 0px 10px; --currency-color: #666666; --font-family: Menlo, Monaco, Consolas, monospace; --font-size: 14px; --color: #000000; --input-border-color: #d1d1d1; --input-border-color-focus: #5b9dd9; --input-box-shadow-focus: rgba(30, 140, 190, 0.8); --z-index: 100
}
.container {
  width: 100%; display: flex !important; height: var(--height); align-items: center; background: #ffffff; box-sizing: border-box; overflow: hidden; border: var(--input-border-color) 1px solid; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.08); cursor: text; position: relative; z-index: var(--z-index); transition: all .3s ease
}
.container input {
  box-sizing: border-box; outline: none; border: 0px; background: transparent; font-family: var(--font-family); font-size: var(--font-size)
}
.container div.currency {
  height: 100%; padding: var(--currency-padding); display: flex; align-items: center; background: var(--currency-background); font-family: var(--font-family); font-size: var(--font-size); color: var(--currency-color); border-right: var(--input-border-color) 1px solid
}
.container div.currency:empty {
  display: none
}
.container div.value {
  flex: 1; width: 0px; height: 100%; display: flex; position: relative; --suffix-left: 0px
}
.container div.value input {
  width: 100%; height: 100%; padding: var(--padding); color: var(--color); position: relative; z-index: 100
}
.container div.value div.mirror {
  display: flex; height: 100%; align-items: center; position: absolute; top: 0px; left: 0px; padding: var(--padding); padding-right: 0px; visibility: hidden; font-family: var(--font-family); font-size: var(--font-size)
}
.container div.value::after {
  display: flex; height: 100%; align-items: center; content: attr(suffix); padding: var(--padding); padding-left: 0px; font-family: var(--font-family); font-size: var(--font-size); color: #999; position: absolute; top: 0px; left: var(--suffix-left); z-index: 100; pointer-events: none
}
.container div.mask {
  width: 100%; height: 100%; background: #dddddd; opacity: 0; position: absolute; top: 0px; left: 0px; z-index: -100
}
.container.on {
  border-color: var(--input-border-color-focus); box-shadow: 0px 0px 2px var(--input-box-shadow-focus)
}
.container.disabled div.mask {
  opacity: 0.3; z-index: 10000
}